<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2019/3/15
  Time: 13:55
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>ajax请求</title>
    <script type="text/javascript">
        // 创建一个ajax引擎对象全局变量
        var xmlhttp;

        // 初始化ajax引擎对象
        function init() {
            xmlhttp = null;
            if (window.XMLHttpRequest) {
                // code for Firefox, Opera, IE7, etc.
                xmlhttp = new XMLHttpRequest();
            }
            else if (window.ActiveXObject) {
                // code for IE6, IE5
                xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
            }
        }

        // 进行ajax的引擎
        function doAjax() {
            // 初始化ajax引擎对象
            init();
            // 委托ajax引擎代替浏览器进行想服务器的http请求
            if (xmlhttp != null) {
                // 绑定ajax引擎的回调函数，只是用函数名，不需要带括号
                xmlhttp.onreadystatechange = state_Change;
                // 设置发送到服务器的连接（form表单的action属性）
                var url = "ajaxdemo1";
                // 设置ajax请求的参数（第三个参数：是是否进行异步请求操作）
                xmlhttp.open("GET", url, true);
                // 执行发送动作
                xmlhttp.send(null);
            }
            else {
                alert("Your browser does not support XMLHTTP.");
            }
        }

        // 回调函数
        function state_Change() {
            /*
            readyState:是ajax引擎的发生状态变化：
            •0: 请求未初始化
            •1: 服务器连接已建立
            •2: 请求已接收
            •3: 请求处理中
            •4: 请求已完成，且响应已就绪

             */
            /*
            status:是http请求的状态
            200: "OK"
            404: 未找到页面

             */
            //请求已完成，且响应已就绪
            if (xmlhttp.readyState == 4) {
                if (xmlhttp.status == 200) {
                    // 200 = "OK"
                    // ajax引擎代理完成请求，可以进行回调处理
                    // 回调业务逻辑处理
                    //document.getElementById('T1').innerHTML=xmlhttp.responseText;
                    // 进行dom操作
                    document.getElementById("lbMsg").innerHTML = xmlhttp.responseText;
                }
                else {
                    // ajax请求处理失败
                    alert("Problem retrieving data:" + xmlhttp.statusText);
                }
            }
        }

    </script>
</head>
<body>
<form>
    <input type="button" onclick="doAjax()" value="原生ajax请求">
<label id="lbMsg"></label>
</form>
</body>
</html>
